Wednesday, October 05, 2005

Google Maps within Google's Blogger

Welcome to my tutorial on how to use Google Maps within your Blogger blog. There are some tricks you have to do to get it work, which I will show here.

There are two approaches you can take. Either a use a simple link to an external map. Or use the API to embed internally. It depends on what you want to do with the map that will determine which you will use.

If you simply want to offer a map of a location, and do not care to have the map itself in your blog, then use the link method.

If you want the map to show up on your blog, then use the embed method. The embed method is more difficult. A little knowledge of HTML and Javascript is helpful. It is very powerful and allows you a great amount of control over what is displayed on the map. But if you follow the instructions carefully, you should be up and running in about 30 minutes.

Let's get started!
A Serious Working Example
I maintain my brother's Blogger blog for him. I've used Google's mapping service extensively to track his voyage. I use three methods on his blog site.
  • I have hard-coded links on each blog post that use Google Map to show where he was when that post was written.
  • I have a post that I update that uses Google Map to show not only where he is, but where he was, and a line showing the voyage. Pretty cool!
  • Lastly, I use Google Earth for more fun.
Check it out here!

In the case of my brother's blog, I created an Excel spreadsheet that generates all of the code I need for all of the maps. I simply create add a row, enter the name, date, and coordinates. Then I just cut-n-paste the code it creates and drop it into the Blogger post for Google Map, and the KML file for Google Earth. It takes me about 4 minutes to add and updates the maps on his site everytime he adds a post.

Feedback
I appreciate any feedback, good or bad. I have tested these methods out in Internet Explorer 7 and Firefox 2. Please let me know if you find any problems. Thank you.

Thanks!
A hat tip to Bosco at BossBlog who taught me how to use the new My Maps service with Blogger. He has a tutorial based on my original version from 2005 to demonstrate how to do this too. But his is in Spanish.

Also, thanks to the geeks at Google Maps API Discussion Board.

Have fun!

9 comments:

Maarten said...

The code didn't work for me.

One has to escape the CDATA not with //, but embed it in /* */, so it won't escape the onload and onunload functions

Peter de Wit said...

Hello Ron

I am a computer novice, and have just come across your interesting site.

I was wondering if you have any knowledge on how to insert a Google Map into my iWeb site at http://www.peterdewitscafe.co.uk?

I have tried, but it doesn't seem that one can insert html code into iWeb.
Any advice welcome.
Regards

Peter de Wit

my email is janedewit@yahoo.co.uk

Keith said...

Hello,
I'm having trouble getting it to work. IE6 says it is expecting an object at Line 393 Char 1.
I edited the template as instructed and put my API key and custom map url in the Post code.
Can you help?
keithemmAThotmailDOTcom

Dave said...

Thanks for the great advice.

Although now the google maps includes a way to get the html code for 'My Map'.

Click on 'link to this page' and then the 'Customize and preview embedded map' option takes you to a tool that generates the HTML that you can copy & paste.

thomas said...

This semms to be a very Cool and complete tutorial Thanks !
I followed the "embedded method" and i could display the map of your example,
but i found the following problems:
1)i could display a map ONLY if the script command entered in the blog post is written WITHOUT indentation,i.e in one line (which is not easy to read but this is another problem)
2)if I enter the script in one post and i try to display the map in this post, the map is not displayed.BUT if i try to display the map from another post(means the script is in a first post and the map is displayed in another post) it works. do you have an explanation to that and maybe a way to fix it?

Dulipudi Durga Prasad said...

Thank you , that worked like a charm.I have been struggling for
using Javascript in blogger "post".
The trick to modify the template once for all did come handy to me.

Michael Smith said...

This approach is problematic if you want more than one map per page: the code that goes into the template has a hard-wired reference to one particular map. After a bit of tinkering I came up with a different approach, which works nicely for the little maps, all very similar, that I embed in lots of posts on my blog fakesprogress.blogspot.com. I see that I can't leave Javascript code in a comment here, so I've put it up at www.smithbowen.net/gmaps-blogspot.txt.

Rony Panna said...

Really Amazing Blog!!!
I have found this blogs posts very helpful. No doubt you will get more heigh ranks in various keywords. I have already linked a backlink with your site.

I really appreciate your teaching quality. I like this post. So, I'm going to post a comment here.
Anyway you can also visit my Blogger Tips and Tricks blog for a great dealing.
How to add Google Map in blogger

Roomie Peters said...

I have been looking for some help on setting up multiple maps. the script given here: "http://ron_larson.blogspot.in/2007/05/google-maps-in-blogger-multiple-maps.html "is exactly what i needed. This code just helped me out.
by,
App Maps